<template>
  <div class="dashboard">
    <a-row :gutter="20">
      <a-col :xs="24" :sm="12" :lg="8">
        <a-card title="基本信息">
          <div class="user-info">
            <img
              src="src/assets/commonImgs/img.jpg"
              class="user-avator"
              alt=""
            />
            <div class="user-info-cont">
              <div class="user-info-name">{{ name }}</div>
              <!-- <div class="inline-block">管理员</div> -->
              <!-- <svg-icon slot="icon" icon-class="guide" /> -->
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { getStore } from 'utils/util.js'

export default {
  name: 'dashboard',
  data() {
    return {
      name: '',
      eid: -1,
      merchantInfo: {},
      count: {
        userVisit: 2110,
        totalOrder: 1200,
        completeOrder: 820
      },
      apply: {
        date: '',
        name: '',
        nickname: '',
        phone: '',
        wechat: '',
        sex: 0
      },
      applyIsShow: false,
      employeeInfo: {}
    }
  },
  computed: {},
  mounted() {
    this.$nextTick(() => {
      this.getMerchantInfo()
    })
  },
  methods: {
    getMerchantInfo() {
      this.name = getStore('userInfo').username
    },
    getCount() {},
    getOrder() {
      this.$axios('')
        .then((res) => {})
        .catch((err) => {})
    },
    getApply() {
      this.$axios('')
        .then((res) => {})
        .catch((err) => {})
    },
    formatterDate(row) {
      var date = new Date(row.date)
      return `${date.getFullYear()}-${
        date.getMonth() + 1 > 9
          ? date.getMonth() + 1
          : '0' + (date.getMonth() + 1)
      }-${date.getDate() > 10 ? date.getDate() : '0' + date.getDate()}`
    },
    formatterSex(row) {
      return (row.sex = 0 ? '女' : '男')
    },
    seeApply(index, row) {
      this.eid = index
      this.apply = this.employeeApply[index]
      this.applyIsShow = true
    }
  }
}
</script>

<style scoped>
.dashboard {
  padding: 20px;
}
.el-row {
  margin-bottom: 20px;
}

.grid-content {
  display: flex;
  align-items: center;
  height: 100px;
}

.grid-cont-right {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: #999;
}

.grid-num {
  font-size: 30px;
  font-weight: bold;
}

.grid-con-icon {
  font-size: 50px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}

.grid-con-1 .grid-con-icon {
  background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
  background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
  background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
  color: rgb(242, 94, 67);
}

.user-info {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  /* border-bottom: 2px solid #ccc; */
  /* margin-bottom: 20px; */
}

.user-avator {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

.user-info-cont {
  padding-left: 20px;
  flex: 1;
  font-size: 14px;
  color: #999;
}

.user-info-cont div:first-child {
  font-size: 24px;
  color: #222;
}

.user-info-list {
  font-size: 14px;
  color: #666;
  line-height: 25px;
  display: flex;
  flex-direction: row;
  padding: 5px 0;
  border-bottom: 1px solid #eee;
}

.user-info-list span:last-child {
  flex: 1;
}

.user-info-list span:first-child {
  flex: 0 0 100px;
}

.moduleBox .title {
  padding-bottom: 5px;
  margin-bottom: 10px;
  color: #409eff;
  border-bottom: 1px solid #409eff;
}

.employeeInfo {
  margin-bottom: 10px;
}

.experience-info-list {
  font-size: 14px;
  color: #666;
  line-height: 25px;
  display: flex;
  flex-direction: row;
  padding: 6px 0;
}

.experience-list span:last-child {
  flex: 1;
}

.experience-list span:first-child {
  flex: 0 0 100px;
}

.experience-item {
  list-style: none;
  outline-style: none;
  display: flex;
  align-items: center;
  margin: 10px 0;
}

.experience-item img {
  flex: 0 0 40px;
  height: 40px;
  padding-right: 10px;
}

.experience .workTime {
  display: inline-block;
  width: 100px;
  color: #fff;
  background: #409eff;
  text-align: center;
  height: 28px;
  line-height: 28px;
  margin: 10px 0 5px 10px;
}

.experience-item .detail span:first-child {
  font-size: 16px;
  color: #333;
}

.experience-item .detail span:last-child {
  font-size: 16px;
  color: #666;
}

.employee-info-list span:last-child {
  flex: 1;
}

.employee-info-list span:first-child {
  flex: 0 0 100px;
}

.employee-info-list {
  font-size: 14px;
  color: #666;
  line-height: 25px;
  display: flex;
  flex-direction: row;
  padding: 6px 0;
}

.License,
.ID_back {
  position: relative;
  margin-bottom: 10px;
  width: 100%;
}

.License img,
.ID_back img {
  width: 100%;
}

.License .mask,
.ID_back .mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  text-align: center;
  cursor: pointer;
}

.mgb20 {
  margin-bottom: 20px;
}

.clearfix {
  margin-bottom: 20px;
}

.todo-item {
  font-size: 14px;
}

.todo-item-del {
  text-decoration: line-through;
  color: #999;
}
</style>
